<!-- order-process.component.html -->
<div class="order-process">

  <div class="page-header">
   <div class="flex items-center gap4 justify-center mb-4">
    <h1 class="page-heading m-0" >订单处理中心</h1>
    <app-key-strategy-display [keyStrategy]="keyType"></app-key-strategy-display>
   </div>
    <div class="description">
      <nz-alert nzType="info" nzMessage="模块说明" nzDescription="订单处理中心用于管理和处理图书借阅、归还、预约等订单。支持实时更新和批量处理功能。"
        nzShowIcon></nz-alert>
    </div>
  </div>

  <div class="control-panel">
    <div class="flex gap-4  justify-center ">
      <form nz-form [nzLayout]="'inline'" class="demo-form-inline">
        <nz-form-item>
          <nz-form-label>订单状态</nz-form-label>

          <nz-form-control>
            <nz-select [(ngModel)]="orderStatus" nzPlaceHolder="选择状态" name="orderStatus">
              <nz-option nzLabel="全部" nzValue="全部"></nz-option>
              <nz-option nzLabel="待处理" nzValue="待处理"></nz-option>
              <nz-option nzLabel="处理中" nzValue="处理中"></nz-option>
              <nz-option nzLabel="已完成" nzValue="已完成"></nz-option>
              <nz-option nzLabel="已取消" nzValue="已取消"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label>更新频率</nz-form-label>

          <nz-form-control>
            <nz-input-number
              [(ngModel)]="updateInterval"
              [nzMin]="100"
              [nzMax]="5000"
              [nzStep]="100"
              (ngModelChange)="handleIntervalChange()"
              name="updateInterval"
            ></nz-input-number>
          </nz-form-control>
        </nz-form-item>

      </form>
    </div>

    <div class="flex gap-4 flex-wrap justify-center mt-8">
      <button nz-button nzType="primary" (click)="toggleUpdate()">
        {{ isUpdating ? '暂停自动刷新' : '开启自动刷新' }}
      </button>
      <button nz-button nzType="primary" (click)="handleBatchProcess()">
        批量处理
      </button>
      <button nz-button nzType="primary" (click)="generate2000Orders()">生成2000条</button>
      <button nz-button nzType="primary" (click)="insertRandomOrder()">插入订单</button>
      <button nz-button nzType="primary" (click)="deleteRandomOrder()">删除订单</button>
      <button nz-button nzType="primary" (click)="replaceAllOrders()">替换所有</button>
      <button nz-button nzType="primary" (click)="shuffleOrders()">打乱顺序</button>
    </div>
  </div>

  <div class="performance-stats">
    <div nz-row [nzGutter]="20">
      <div nz-col [nzSpan]="6">
        <div class="stat-card">
          <div class="stat-title">待处理订单</div>
          <div class="stat-value">{{ pendingCount }}</div>
        </div>
      </div>
      <div nz-col [nzSpan]="6">
        <div class="stat-card">
          <div class="stat-title">处理中订单</div>
          <div class="stat-value">{{ processingCount }}</div>
        </div>
      </div>
      <div nz-col [nzSpan]="6">
        <div class="stat-card">
          <div class="stat-title">今日完成</div>
          <div class="stat-value">{{ completedToday }}</div>
        </div>
      </div>
      <div nz-col [nzSpan]="6">
        <div class="stat-card">
          <div class="stat-title">处理效率</div>
          <div class="stat-value">{{ efficiency }}%</div>
        </div>
      </div>
    </div>
  </div>

  <div class="table-container">
    <nz-table #basicTable [nzData]="filteredData" [nzScroll]="{ y: 'calc(100vh - 380px)' }" [nzBordered]="true"
      [nzShowPagination]="false">
      <thead>
        <tr>
          <th
            nzShowCheckbox
            [nzWidth]="'40px'"
            nzAlign="center"

            (nzCheckedChange)="onAllChecked($event)"
          ></th>
          <th [nzWidth]="'90px'" nzAlign="center">订单号</th>
          <th [nzWidth]="'140px'" nzAlign="center">图书名称</th>
          <th [nzWidth]="'70px'" nzAlign="center">用户</th>
          <th [nzWidth]="'70px'" nzAlign="center">类型</th>
          <th [nzWidth]="'70px'" nzAlign="center">状态</th>
          <th [nzWidth]="'130px'" nzAlign="center">处理进度</th>
          <th [nzWidth]="'130px'" nzAlign="center">创建时间</th>
          <th [nzWidth]="'150px'" nzAlign="center">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of basicTable.data">
          <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="onItemChecked(data, $event)"></td>
          <td nzAlign="center">{{ data.id }}</td>
          <td nzAlign="center" nzEllipsis>{{ data.bookName }}</td>
          <td nzAlign="center">{{ data.userName }}</td>
          <td nzAlign="center">
            <nz-tag [nzColor]="getOrderType(data.type)" class="order-type-tag">
              {{ data.type }}
            </nz-tag>
          </td>
          <td nzAlign="center">
            <span class="order-status" [ngClass]="getStatusType(data.status)">
              {{ data.status }}
            </span>
          </td>
          <td nzAlign="center">
            <nz-progress [nzPercent]="data.progress" [nzStatus]="getProgressStatus(data.progress)"
              [nzStrokeWidth]="12"></nz-progress>
          </td>
          <td nzAlign="center">{{ data.createTime }}</td>
          <td nzAlign="center">
            <div class="operation-buttons">
              <button nz-button nzSize="small" nzType="primary" (click)="handleProcess(data)">处理</button>
              <button nz-button nzSize="small" nzType="primary" (click)="handleCancel(data)">取消</button>
              <button nz-button nzSize="small" nzType="primary" (click)="handleDetail(data)">详情</button>
            </div>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</div>